<template>
    <div>
        <div class="FormCustomView-name" v-if="config.showName">{{config.name}}</div>
        <div class="FormCustomView-center" v-for="item in layoutList" >
            <div class="FormCustomView-name">{{item.config.name}}</div>
            <form-custom-control :paramsCustom="paramsMontage" :item="item" :ref="item.id" :readonly="true"></form-custom-control>
        </div>
    </div>
</template>

<script>

import FormCustomPublic from "../FormCustomPublic.js";
import BusEvent from "../BusEvent";
import {defineAsyncComponent } from 'vue'
export default {
    name: "CustomPageView",
    props: {
    },
    mixins:[FormCustomPublic,BusEvent],
    components: {
        FormCustomControl:defineAsyncComponent(()=>import('../../GridLayoutView/FormCustomControl.vue')),
    },
    data(){
        return{
            layoutList:[],
            paramsMontage:{},//再次拼接参数
        }
    },
    created(){
        let params = this.getRouterParams();
        if(this.config.params){
            this.config.params.filter(item=>{
                this.paramsMontage[item.receiveParameters] = params[item.inParameter]
            })
        }
        this.layoutList =this.config.custom.json?JSON.parse(this.config.custom.json):[]
    },
    methods:{

    }
}
</script>

<style scoped>
.FormCustomView{
    height: 100%;
    overflow: auto;
}
.FormCustomView-name{
    font-size: 0.9rem;
    line-height: 2rem;
    padding-left: 1rem;
    background: white;
    border-bottom: 1px solid  #e8e8e8;
}
</style>
